<script setup lang="js">
import { reactive } from "vue";

const red = { color: "red" };
const blue = { color: "blue" };
const colors = [red, blue];
let colorIndex = 0;
const reactiveColor = reactive({
  type: red // red是对象，自动转换为Reactive代理作为type属性值
});

console.log('reactiveColor.type', reactiveColor.type);

function reset() {
  red.color = 'red';
  blue.color = 'blue';
}

function changeColor1() {
  // 以下判断永远不成立
  // red和blue是对象，reactiveColor.type是对象的代理，两者不一致
  if (reactiveColor.type === red) {
    reactiveColor.type = blue;
  } else if (reactiveColor.type === blue) {
    reactiveColor.type = red;
  }
  // =====对象比较时，均是对对象的地址进行比较，效果一样
  // 基本变量时，===不进行值类型转换，直接比较；==进行值类型转换再比较
  // 例如 '5'===5 false; '5'==5 true
}

function changeColor2() {
  if (reactiveColor.type === reactive(red)) {
    // 将两者均转成对象代理，可进行等值判断
    reactiveColor.type = blue;
  } else if (reactiveColor.type === reactive(reactive(blue))) {
    // 代理的代理与对象代理指向同一个对象，可进行等值判断
    reactiveColor.type = red;
  }
}

function changeColor3() {
  colorIndex++;
  colorIndex = colorIndex % colors.length;
  // %为求模运算（求余数），避免数组越界
  reactiveColor.type = colors[colorIndex];
}

function changeColor4() {
  // 以下处理会产生陷阱
  // 当对象的代理的属性值发生变化，原对象的属性值也会发生变化
  if (reactiveColor.type.color === red.color) {
    // 若条件成立，则reactiveColor.type指向的对象的color属性被修改
    // 即red.color被修改成blue.color
    reactiveColor.type.color = blue.color;
    // red.color将变成'blue'
  } else if (reactiveColor.type.color === blue.color) {
    reactiveColor.type.color = red.color;
    // blue.color也会被更改
  }
  console.log('red', red, 'blue', blue, 'reactiveColor.type', reactiveColor.type);
}

function changeColor5() {
  // 用于判断场合建议的做法
  if (reactiveColor.type.color === red.color) {
    reactiveColor.type = blue;
  } else if (reactiveColor.type.color === blue.color) {
    reactiveColor.type = red;
  }
  // reactiveColor.type指向整个对象，更换对象，不会修改原对象的值
  console.log('red', red, 'blue', blue, 'reactiveColor.type', reactiveColor.type);
}

function changeColor6() {
  // 使red和blue对象属性值交换
  // 改变reactiveColor.type的值，不触发UI更新
  // 在实际编程中，避免该情形发生，会发生数据不一致性，又不容易觉察
  let temp = red.color;
  red.color = blue.color;
  blue.color = temp;
  console.log('red', red, 'blue', blue, 'reactiveColor.type', reactiveColor.type);
}
</script>

<template>
  <div>
    <q-banner class="bg-amber-4">
      <p class="text-h4 text-center">陈一非 23211860123</p>
    </q-banner>
    <div class="row justify-center">
      <q-btn @click="changeColor1" color="red" label="Change1" />
      <q-btn @click="changeColor2" color="orange" label="Change2" />
      <q-btn @click="changeColor3" color="yellow" label="Change3" />
      <q-btn @click="changeColor4" color="teal" label="Change4" />
      <q-btn @click="changeColor5" color="blue" label="Change5" />
      <q-btn @click="changeColor6" color="purple" label="Change6" />
      <q-btn @click="reset" color="black" label="Reset" />
    </div>
    <q-card class="q-ma-lg text-h6">
    <p>red变量值：{{ red }}</p>
    <p>blue变量值：{{ blue }}</p>
    <p>reactiveColor变量值：{{ reactiveColor }}</p>
    </q-card>
  </div>
</template>
